<template>
  <Card dis-hover :bordered="false">
    <Form inline>
      <Row>
        <Col span="24">
          <FormItem>
            <DatePicker
              v-model="params.date"
              type="daterange"
              :options="options"
              placeholder="发布日期"
              @on-change="searchData"
            />
          </FormItem>
          <FormItem>
            <Input
              v-width="200"
              placeholder="请输入关键词"
              v-model="params.keywords"
              @on-clear="searchData"
              @on-enter="searchData"
              clearable
            />
          </FormItem>
          <FormItem>
            <Select
              v-width="120"
              placeholder="请选择平台"
              v-model="params.platform_id"
              @on-change="searchData"
              :filterable="platList.length >= 10"
              clearable
            >
              <Option
                v-for="item in platList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem>
            <TreeSelect
              v-width="150"
              placeholder="部门"
              v-model="params.department_id"
              :data="departmentList"
              @on-change="searchData"
              @on-clear="clearDep"
              clearable
            />
          </FormItem>
          <FormItem>
            <Select
              v-width="100"
              placeholder="医生"
              v-model="params.doctor_id"
              @on-change="searchData"
              :filterable="doctorList.length >= 10"
              clearable
            >
              <Option
                v-for="item in doctorList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem>
            <Select
              v-width="120"
              placeholder="请选择发布人"
              v-model="params.created_member_id"
              @on-change="searchData"
              :filterable="userList.length >= 10"
              clearable
            >
              <Option
                v-for="item in userList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <Table
      :columns="columns"
      :data="list"
      :loading="loading"
      @on-sort-change="sortChange"
      :max-height="tableHeigth"
    >
      <template #title="{ row }">
        <Ellipsis
          :text="row.title"
          :lines="1"
          class="view"
          tooltip
          :transfer="true"
          @click="handleView(row)"
        />
      </template>
      <template #action="{ row }">
        <a
          @click="handleAdd(row.id)"
          v-if="row.is_edit == 1"
          v-hasC="{
            name: 'v1-buss-content-publish-update-data',
            flag: 'v1/buss/content-publish/update-data',
          }"
          >编辑</a
        >
        <a
          @click="handleAdd(row.id)"
          v-else
          v-hasC="{
            name: 'v1-buss-content-publish-update-data',
            flag: 'v1/buss/content-publish/update-data',
          }"
          >录入数据</a
        >
        <Divider
          type="vertical"
          v-hasC="{
            name: 'v1-buss-content-publish-update-data',
            flag: 'v1/buss/content-publish/update-data',
          }"
        />
        <a
          @click="handleDel(row.id)"
          class="del"
          v-hasC="{
            name: 'v1-buss-content-publish-delete',
            flag: 'v1/buss/content-publish/delete',
          }"
          >删除</a
        >
      </template>
    </Table>
    <Page
      class="ivu-mt-16"
      :total="total"
      :modelValue="params.current"
      :page-size="params.size"
      :page-size-opts="pageOpts"
      show-total
      show-sizer
      @on-change="changePage"
      @on-page-size-change="changepageSize"
    />
    <Modal
      :mask-closable="false"
      v-model="addModal"
      title="录入数据"
      :footer-hide="true"
      :draggable="true"
    >
      <Form
        ref="create"
        inline
        :model="dataInfo"
        :rules="rules"
        :label-width="80"
      >
        <Row>
          <Col span="12">
            <FormItem label="浏览量" prop="read_num">
              <InputNumber
                v-model="dataInfo.read_num"
                :min="0"
                placeholder="浏览量"
              />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="收藏" prop="collect_num">
              <InputNumber
                v-model="dataInfo.collect_num"
                :min="0"
                placeholder="收藏"
              />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="点赞" prop="like_num">
              <InputNumber
                v-model="dataInfo.like_num"
                :min="0"
                placeholder="点赞"
              />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="评论" prop="comment_num">
              <InputNumber
                v-model="dataInfo.comment_num"
                :min="0"
                placeholder="评论"
              />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer" style="text-align: right">
        <Button type="default" @click="addModal = false">取消</Button>
        <Button
          type="primary"
          @click="ok"
          :loading="btnLoading"
          style="margin-left: 10px"
          >确定</Button
        >
      </div>
    </Modal>
    <preview
      :showPre="showPre"
      @closePreModal="closePreModal"
      :contentId="contentId"
      :showDownLoad="false"
    />
  </Card>
</template>
<script>
import {
  contentPublishList,
  updateData,
  publishCondition,
  contentPublishInfo,
  delPublish,
} from "@api/dataentry.js";
import preview from "@/components/preview";
import dayjs from "dayjs";
export default {
  name: "contentdata",
  components: { preview },
  data() {
    return {
      tableHeigth: document.body.clientHeight - 280,
      addModal: false,
      params: {
        date: [],
        keywords: "",
        platform_id: "",
        doctor_id: "",
        created_member_id: "",
        department_id: "",
        order_column: "",
        order_sort: "",
        current: 1,
        size: 10,
      },
      platList: [],
      doctorList: [],
      userList: [],
      departmentList: [],
      total: 0,
      showPre: false,
      contentId: "",
      pageOpts: [10, 20, 30, 40],
      columns: [
        {
          slot: "title",
          title: "标题",
          minWidth: 200,
        },
        {
          key: "platform_name",
          title: "平台",
          minWidth: 100,
        },
        {
          key: "department_name",
          title: "部门",
          minWidth: 160,
        },
        {
          key: "account_name",
          title: "账号",
          ellipsis: "true",
          tooltip: "true",
          minWidth: 120,
        },
        {
          key: "doctor_name",
          title: "医生",
          width: 100,
        },
        {
          key: "read_num",
          title: "浏览量",
          width: 100,
          sortable: "custom",
        },
        {
          key: "like_num",
          title: "点赞",
          width: 80,
          sortable: "custom",
        },
        {
          key: "collect_num",
          title: "收藏",
          width: 80,
          sortable: "custom",
        },
        {
          key: "comment_num",
          title: "评论",
          width: 80,
          sortable: "custom",
        },
        {
          key: "created_member_name",
          title: "发布人",
          width: 100,
        },
        {
          key: "publish_time_str",
          title: "发布日期",
          width: 160,
        },
        {
          key: "change_date",
          title: "数据更新日期",
          width: 160,
        },
        {
          slot: "action",
          title: "操作",
          width: 140,
          fixed: "right",
        },
      ],
      list: [],
      loading: false,
      btnLoading: false,
      dataInfo: {
        id: "",
        read_num: null,
        like_num: null,
        collect_num: null,
        comment_num: null,
      },
      rules: {},
      options: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        },
      },
    };
  },
  mounted() {
    this._selectInfo();
    this.getData();
  },
  methods: {
    //切换page
    changePage(index) {
      this.params.current = index;
      this.getData();
    },
    changepageSize(val) {
      this.params.size = val;
      this.getData();
    },
    sortChange(e) {
      this.params.order_column = e.key.replace(/_str$/, "");
      this.params.order_sort = e.order;
      this.getData();
    },
    handleView(info) {
      this.showPre = true;
      this.contentId = info.content_id;
    },
    closePreModal(state) {
      this.showPre = state;
    },
    //获取下拉列表
    _selectInfo() {
      publishCondition().then((res) => {
        this.platList = res.platform;
        this.doctorList = res.doctor;
        this.userList = res.created_member;
        this.departmentList = this.changeData(res.department_arr);
      });
    },
    handleDel(index) {
      this.$Modal.confirm({
        title: "删除提示",
        content: "是否确认删除此条记录，删除后不可恢复",
        onOk: () => {
          delPublish({ id: index })
            .then(() => {
              this.$Message.success("删除成功");
              this.getData();
            })
            .catch(() => {});
        },
      });
    },
    handleAdd(id) {
      contentPublishInfo({ id: id }).then((res) => {
        this.dataInfo = {
          id: res.id,
          read_num: res.read_num,
          like_num: res.like_num,
          collect_num: res.collect_num,
          comment_num: res.comment_num,
        };
      });

      this.addModal = true;
      this.$refs.create.resetFields();
    },
    changeData(data) {
      data.forEach((item) => {
        item.value = item.id;
        item.title = item.department_name;
        item.expand = true;
        if (item.children && item.children.length > 0) {
          this.changeData(item.children);
        }
      });
      return data;
    },
    getData() {
      this.loading = true;
      const params = {
        publish_stime: this.params.date[0]
          ? dayjs(this.params.date[0]).format("YYYY-MM-DD")
          : "",
        publish_etime: this.params.date[1]
          ? dayjs(this.params.date[1]).format("YYYY-MM-DD")
          : "",
        keywords: this.params.keywords,
        platform_id: this.params.platform_id,
        doctor_id: this.params.doctor_id,
        created_member_id: this.params.created_member_id,
        order_column: this.params.order_column,
        order_sort: this.params.order_sort,
        department_id: this.params.department_id,
        pageSize: this.params.size,
        page: this.params.current,
      };
      contentPublishList(params)
        .then((res) => {
          this.list = res.list;
          this.total = res.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    searchData() {
      this.params.current = 1;
      this.getData();
    },
    clearDep() {
      this.params.department_id = "";
      this.searchData();
    },
    ok() {
      this.$refs.create.validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          let params = {
            id: this.dataInfo.id,
            read_num: this.dataInfo.read_num,
            like_num: this.dataInfo.like_num,
            collect_num: this.dataInfo.collect_num,
            comment_num: this.dataInfo.comment_num,
          };
          updateData(params)
            .then(() => {
              this.btnLoading = false;
              this.addModal = false;
              this.getData();
            })
            .catch(() => {
              this.btnLoading = true;
            });
        } else {
          this.addModal = true;
          return;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.view {
  color: #2d8cf0;
  cursor: pointer;
}
</style>
